<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <div>
        <h2 class="title">修改手机号</h2>
        <p>请设置新的手机号码</p>
        <el-form-item prop="phone">
          <el-input
            v-model="loginForm.phone"
            type="text"
            auto-complete="off"
            placeholder="请输入手机号"
            prefix-icon="el-icon-phone-outline"
            maxLength="11"
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="code">
          <div class="login-code">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="请输入手机验证码"
              style="width: 63%"
            />
            <div class="login-code-yzm" @click="handleGetCode" v-loading="yzmLoading">
              {{ !timer ? yzmTxt : `${time}s重试` }}
            </div>
          </div>
        </el-form-item>
      </div>

      <!-- <div class="rember">
        <el-button type="text">收不到验证码？</el-button>
      </div> -->
      <el-form-item style="width: 100%">
        <div :loading="loading" @click="handleChange" class="login-btn">
          <span v-if="!loading">确 定</span>
          <span v-else>修 改 中...</span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { updBindPhone, fetchCode } from "@/api/login";

export default {
  name: "changePassword",
  data() {
    return {
      loginForm: {
        code: "",
        phone: "",
      },
      loginRules: {
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
            required: true,
          },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      // 验证码开关
      yzmTxt: "发送验证码",
      time: 60,
      timer: null,
      yzmDis: false,
      yzmLoading: false,
      loading: false,
    };
  },
  created() {},
  methods: {
    async handleChange() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          try {
            const { loginForm } = this;
            this.loading = true;
            await updBindPhone(loginForm);
            const flag = await this.$modal.confirm("修改成功是否重新登录?");
            if (!flag) return;
            await this.$store.dispatch("FedLogOut");
            this.$router.push({ path: "/login" });
          } catch (error) {
            console.error("修改错误", error);
          } finally {
            this.rest();
            this.timer = null;
            clearInterval(this.timer);
            this.loading = false;
          }
        }
      });
    },
    rest() {
      this.loginForm = {
        code: "",
        phone: "",
      };
      this.resetForm("loginForm");
    },
    async handleGetCode() {
      try {
        const {
          loginForm: { phone },
          yzmDis,
        } = this;
        if (yzmDis) return;
        if (!phone) return this.$message.error("手机号不为空");
        this.yzmLoading = true;
        await fetchCode(phone);
        this.$message.success("发送成功");
        this.yzmLoading = false;
        this.yzmDis = true;
        this.codeTimeFun();
      } catch (error) {
        console.error("获取验证码失败", error);
      } finally {
        this.yzmLoading = false;
      }
    },
    codeTimeFun() {
      const { time, timer } = this;
      if (timer) return;
      this.timer = setInterval(() => {
        if (time > 0) {
          this.time--;
        } else {
          clearInterval(this.timer);
          this.time = 60;
          this.yzmDis = true;
        }
      }, 1000);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
  height: calc(100vh - 64px);
  width: 100%;
  position: relative;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 15vh;
}
.title {
  margin-bottom: 0.5em;
}
p {
  font-size: 14px;
  margin-bottom: 0.5em;
}

.login-btn {
  width: 100%;
  height: 42px;
  background: #1890ff;
  border-radius: 6px;
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: 42px;
  cursor: pointer;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 90%;
  max-width: 460px;
  margin: 40px auto;
  padding: 24px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-code {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.login-code-yzm {
  width: 33%;
  height: 36px;
  text-align: center;
  background-color: #ffffff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  outline: none;
  padding: 0 15px;
  cursor: pointer;
}
.rember {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: -20px;
  margin-bottom: 20px;
}
</style>
